<template>
  <el-form ref="dialogForm" label-width="130px" :model="dialogForm" size="mini">
    <el-row>
      <el-col :span="12">
        <el-form-item label="场站代码：" prop="staCd" :rules="rules.staCd">
          <el-input :disabled="disabled || portCode" maxlength="6"  @input="accountInput" style="width: 100%" v-model="dialogForm.staCd"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="场站中文名称：" prop="staCname" :rules="rules.staCname">
          <el-input :disabled="disabled" maxlength="32" style="width: 100%" v-model="dialogForm.staCname"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="场站英文名称：" prop="staEname" :rules="rules.staEname">
          <el-input :disabled="disabled" maxlength="32" @input="accountInput1" style="width: 100%" v-model="dialogForm.staEname"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="所属国家：" prop="staCtyuuid" :rules="rules.staCtyuuid">
          <el-select :disabled="disabled" v-model="dialogForm.staCtyuuid" style="width: 100%"
            @change="changeProvince">
            <el-option v-for="(item, index) in nationList"
              :key="index"
              :label="item.CTY_CNAME"
              :value="item.CTY_CD"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="所属省：" prop="staReguuid" :rules="rules.staReguuid">
          <el-select :disabled="disabled" v-model="dialogForm.staReguuid" style="width: 100%" @change="changeCity">
            <el-option v-for="(item, index) in provinceList"
              :key="index"
              :label="item.PRV_CHNNAME"
              :value="item.PRV_CODE"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="所属市：" prop="staCtuuid" :rules="rules.staCtuuid">
          <el-select :disabled="disabled" v-model="dialogForm.staCtuuid" style="width: 100%">
            <el-option v-for="(item, index) in citiesList"
              :key="index"
              :label="item.CTYE_CHNNAME"
              :value="item.CTYE_CODE"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="有效标志：" prop="staIsvalid">
          <el-radio v-model="dialogForm.staIsvalid" label="Y">是</el-radio>
          <el-radio v-model="dialogForm.staIsvalid" label="N">否</el-radio>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="港口坐标：" prop="staX">
          <el-input :disabled="disabled" maxlength="12" style="width: 30%" v-model="dialogForm.staX"></el-input>
          <el-input :disabled="disabled" maxlength="12" style="width: 30%; margin-left: 10px;" v-model="dialogForm.staY"></el-input>
          <el-button :disabled="disabled" @click="showDialog = true" type="text">地图定位</el-button>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="备注：" prop="staRemark">
          <el-input :disabled="disabled" maxlength="128" style="width: 100%" v-model="dialogForm.staRemark"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
   
    <el-row class="el-dialog__footer">
      <el-col :span="24">
        <el-form-item prop="staY">
          <el-button @click="close">关闭</el-button>
          <el-button v-if="!disabled" @click="save" type="primary">保存</el-button>
        </el-form-item>
      </el-col>
    </el-row>

    <el-dialog
      title="地图定位"
      append-to-body
      v-el-drag-dialog 
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-if="showDialog"
      :visible.sync="showDialog">
      <baidu-map-pop @choose="choose"></baidu-map-pop>
      
      <el-row class="el-dialog__footer">
        <el-col :span="24">
          <el-form-item>
            <el-button @click="showDialog = false;">取消</el-button>
            <el-button @click="saveAddress" type="primary">确定</el-button>
          </el-form-item>
        </el-col>
      </el-row>
     
    </el-dialog>
  </el-form>
</template>

<script>
import {
  getNationService,
  getProvinceService,
  getCityService,
  addStationService,
  editStationService
} from '@/request/api'
import BaiduMapPop from '@/components/baidumap'

export default {
  name: 'roleform',
  components: {
    BaiduMapPop
  },
  props: {
    flt_info: {
      type: Object,
      required: true
    },
    currentMsg: {
      type: Object,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    portCode: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      showDialog: false,
      dialogForm: {
        staCd: '', // 场站代码
        staCname: '', // 场站中文名称
        staEname: '', // 场站英文名称
        staCtyuuid: '', // 所属国家
        staReguuid: '', // 所属省
        staCtuuid: '', // 所属市
        staIsvalid: '', // 有效标志
        staX: '', // 港口坐标
        staY: '', // 港口坐标
        staRemark: '', // 备注
      },
      tempLocation: null, // 当前选中的位置的地址
      fltType: [],
      tyFlag: [],
      ports: [],
      citiesList: [],// 市  下拉
      provinceList: [],// 省  下拉
      nationList: [], // 国家  下拉
    }
  },
  computed: {
    rules() {
      return {
        staCd: [
          { required: true, message: '场站代码不能为空', trigger: 'blur' }
        ],
        staCname: [
          { required: true, message: '场站中文名称不能为空', trigger: 'blur' }
        ],
        staCtyuuid: [
          { required: true, message: '所属国家不能为空', trigger: 'blur' }
        ],
        staReguuid: [
          { required: true, message: '所属省不能为空', trigger: 'blur' }
        ],
        staCtuuid: [
          { required: true, message: '所属市不能为空', trigger: 'blur' }
        ]
      }
    },

  },
  mounted() {
    this.getSelectData()
    if(Object.keys(this.currentMsg).length != 0) {
      this.dialogForm = this.currentMsg
      this.changeProvince(this.dialogForm.staCtyuuid)
      this.changeCity(this.dialogForm.staReguuid)
    }
    if(this.flt_info == 'add') {
      this.dialogForm.staIsvalid = 'Y'
    }
  },
  methods: {
    // 点击确定保存地址
    saveAddress () {
      if (this.tempLocation) {
        this.dialogForm.staX = this.tempLocation.point.lng
        this.dialogForm.staY = this.tempLocation.point.lat
      }
      this.tempLocation = null
      this.showDialog = false
    },
    // 地图选点回调
    choose(location) {
      this.tempLocation = location
    },
    // 校验  输入框  不输入汉字
    accountInput(val) {
      let codeReg = new RegExp('[A-Za-z0-9]+') //正则 英文+数字
      let len=val.length
      let str = ''
      for(var i=0;i<len;i++){
        if(codeReg.test(val[i])){
          str+=val[i]
        }
      }
      this.dialogForm.staCd = str
    },
    accountInput1(val) {
      let codeReg = new RegExp('[A-Za-z0-9]+') //正则 英文+数字
      let len=val.length
      let str = ''
      for(var i=0;i<len;i++){
        if(codeReg.test(val[i])){
          str+=val[i]
        }
      }
      this.dialogForm.staEname = str
    },

    // 下拉框接口
    getSelectData() {
      getNationService().then(res => {
        if(res.success == 1) {
          this.nationList = res.data
        }
      })
    },
    // 点击关闭 按钮
    close() {
      // 关闭时清楚验证信息
      this.$emit('close')
    },
    // 保存 按钮
    save() {
      this.$refs['dialogForm'].validate(valid => {
        if (valid) {
          if(this.flt_info == 'add') {
            addStationService(this.dialogForm).then(res => {
              if(res.success == 1) {
                this.$message({
                  type: 'success',
                  message: '添加成功'
                })
                this.$emit('save', false)
              }
            })
          }else if(this.flt_info == 'edit') {
            editStationService(this.dialogForm).then(res => {
              if(res.success == 1) {
                this.$message({
                  type: 'success',
                  message: '编辑成功'
                })
                this.$emit('save', false)
              }
            })
          }
        }
      })
    },
    // 根据国家查省
    changeProvince(val) {
      getProvinceService({ctycd: val}).then(res => {
        if(res.success ==1) {
          this.provinceList = res.data
        }
      })
    },
    // 根据省查市区
    changeCity(val) {
      getCityService({pvCode: val}).then(res => {
        if(res.success ==1) {
          this.citiesList = res.data
        }
      })
    },
  },
 
}
</script>

<style lang="scss" scoped></style>
